<template>
  <el-dialog :title="formData.id ? '编辑信息' : '新增信息'" :visible.sync="dialogVisible" width="800px">
    <el-form :model="formData" label-width="120px" :inline="true">
      <el-form-item label="部门">
        <el-input :maxlength="50" :show-word-limit="true" style="width: 220px" v-model="formData.department"></el-input>
      </el-form-item>
      <el-form-item label="业务员">
        <el-input :maxlength="50" :show-word-limit="true" style="width: 220px" v-model="formData.salesman"></el-input>
      </el-form-item>
      <el-form-item label="客户名称">
        <el-input :maxlength="50" :show-word-limit="true" style="width: 220px"
          v-model="formData.customerName"></el-input>
      </el-form-item>
      <el-form-item label="客户订单号">
        <el-input :maxlength="50" :show-word-limit="true" style="width: 220px"
          v-model="formData.customerOrder"></el-input>
      </el-form-item>
      <el-form-item label="类别">
        <el-input :maxlength="50" :show-word-limit="true" style="width: 220px" v-model="formData.category"></el-input>
      </el-form-item>
      <el-form-item label="物料代码">
        <el-input :maxlength="50" :show-word-limit="true" style="width: 220px"
          v-model="formData.materialCode"></el-input>
      </el-form-item>
      <el-form-item label="产品名称">
        <el-input :maxlength="50" :show-word-limit="true" style="width: 220px"
          v-model="formData.productName"></el-input>
      </el-form-item>
      <el-form-item label="产品型号">
        <el-input :maxlength="50" :show-word-limit="true" style="width: 220px"
          v-model="formData.productModel"></el-input>
      </el-form-item>
      <el-form-item label="合同备注">
        <el-input :maxlength="50" :show-word-limit="true" style="width: 220px"
          v-model="formData.contractRemarks"></el-input>
      </el-form-item>
      <el-form-item label="单位">
        <el-input :maxlength="50" :show-word-limit="true" style="width: 220px" v-model="formData.unit"></el-input>
      </el-form-item>
      <el-form-item label="订单数量">
        <el-input :maxlength="50" :show-word-limit="true" style="width: 220px"
          v-model="formData.orderQuantity"></el-input>
      </el-form-item>
      <el-form-item label="下单日期">
        <el-date-picker v-model="formData.orderDate" type="date" placeholder="选择日期时间"
          format="yyyy-MM-dd"></el-date-picker>
      </el-form-item>
      <el-form-item label="合同交期">
        <el-date-picker v-model="formData.deliveryDate" type="date" placeholder="选择日期时间"
          format="yyyy-MM-dd"></el-date-picker>
      </el-form-item>
      <el-form-item label="变更后交期">
        <el-date-picker v-model="formData.changeDate" type="date" placeholder="选择日期时间"
          format="yyyy-MM-dd"></el-date-picker>
      </el-form-item>
      <el-form-item label="责任工程师">
        <el-input :maxlength="50" :show-word-limit="true" style="width: 220px"
          v-model="formData.responsibleEngineer"></el-input>
      </el-form-item>
      <el-form-item label="在制状态">
        <el-select v-model="formData.productionStatus" placeholder="请选择">
          <el-option label="待设计" value="待设计"></el-option>
          <el-option label="设计中" value="设计中"></el-option>
          <el-option label="外协中" value="外协中"></el-option>
          <el-option label="待下料" value="待下料"></el-option>
          <el-option label="下料中" value="下料中"></el-option>
          <el-option label="待折弯" value="待折弯"></el-option>
          <el-option label="折弯中" value="折弯中"></el-option>
          <el-option label="待焊接" value="待焊接"></el-option>
          <el-option label="焊接中" value="焊接中"></el-option>
          <el-option label="待喷涂" value="待喷涂"></el-option>
          <el-option label="喷涂中" value="喷涂中"></el-option>
          <el-option label="待组装" value="待组装"></el-option>
          <el-option label="组装中" value="组装中"></el-option>
          <el-option label="返工中" value="返工中"></el-option>
          <el-option label="已完成" value="已完成"></el-option>
          <el-option label="已完成" value="已完成"></el-option>
          <el-option label="已完成" value="已完成"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="入库时间">
        <el-date-picker v-model="formData.storageTime" type="date" placeholder="选择日期时间"
          format="yyyy-MM-dd"></el-date-picker>
      </el-form-item>
      <el-form-item label="出货日期">
        <el-date-picker v-model="formData.shippingDate" type="date" placeholder="选择日期时间"
          format="yyyy-MM-dd"></el-date-picker>
      </el-form-item>
      <el-form-item label="是否外协">
        <el-select v-model="formData.outsourced" placeholder="请选择">
          <el-option label="是" value="0"></el-option>
          <el-option label="否" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="投产数量">
        <el-input :maxlength="50" :show-word-limit="true" style="width: 220px"
          v-model="formData.productionQuantity"></el-input>
      </el-form-item>
      <el-form-item label="已发货数量">
        <el-input :maxlength="50" :show-word-limit="true" style="width: 220px"
          v-model="formData.quantityShipped"></el-input>
      </el-form-item>
      <el-form-item label="零件图">  
         <el-button type="text" icon="el-icon-view" circle @click="openPdf" >预览pdf</el-button>
      </el-form-item>
      <el-form-item label="备注">
        <el-input :maxlength="200" :show-word-limit="true" style="width: 570px" type="textarea" :rows="2"
          placeholder="请输入内容" v-model="formData.remarks">
        </el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="submitForm">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { createBydspecialPojectData, getInfo, updateBydSpecialPojectData } from "@/views/subdev/special/helper/api";
/*
<embed 
          :src="pdfUrl" 
          type="application/pdf" 
          width="100%" 
          height="600px"
          fallback="您的浏览器不支持PDF预览，请下载查看。"
        />
*/
export default {
  props: {
    id: {
      type: [String, Number],
      default: null,
    },
  },
  data() {
    return {
      dialogVisible: false,
      formData: {
        department: "",
        salesman: "",
        customerName: "",
        customerOrder: "",
        category: "",
        materialCode: "",
        productName: "",
        productModel: "",
        contractRemarks: "",
        unit: "",
        orderQuantity: "",
        orderDate: "",
        deliveryDate: "",
        changeDate: "",
        responsibleEngineer: "",
        productionStatus: "",
        storageTime: "",
        shippingDate: "",
        outsourced: "",
        productionQuantity: "",
        quantityShipped: "",
        remark: "",
        pdfUrl:""
      },
    };
  },
  computed: {
    isEdit() {
      return this.id !== null;
    },
  },
  watch:{
    dialogVisible(val){
      if(!val){
        this.pdfUrl=false
      }
    }
  },
  methods: {
    openPdf(){
      window.open(this.pdfUrl);
    },
    showDialog(data) {
      this.dialogVisible = true;
      if (data?.id) {
        // 编辑逻辑，暂时留空
        getInfo(data?.id).then(res => {
          this.formData = res
          this.formData.productPath
        
            fetch(this.formData.productPath, {
            method: 'GET', // 默认就是GET，可省略
            headers: {
              'Authorization': 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbiIsImxvZ2luX3VzZXJfa2V5IjoiMjIyMWU0M2YtOTJjNS00M2MyLWIyOWEtZmI4MmVjOTZjYWJlIn0.0PErMPwJKljStbR1rEGtyPIieMuFum_OAL0ov1-vwBRkOCUKHnJl8jqeDd8vAx2ZcpcTIApl_P0vqV0VM4HT4A'
            }
          })
          .then(response => {
            // 检查请求是否成功
            if (!response.ok) {
              throw new Error(`HTTP error! status: ${response.status}`);
            }
            // 将响应转换为Blob对象（适 是二进制文件）
            return response.blob();
          })
          .then(blob => {
            // 创建PDF的URL
            const pdfUrl = URL.createObjectURL(blob);
            
            // 这里可以使用这个URL进行PDF预览
            // 例如：设置iframe的src
            // document.getElementById('pdfViewer').src = pdfUrl;
            
            // 或者打开新窗口显示PDF
            this.pdfUrl=pdfUrl
          })
          .catch(error => {
            console.error('获取PDF失败:', error);
          });
          
    
        })
      } else {
        this.formData = {
          department: "",
          salesman: "",
          customerName: "",
          customerOrder: "",
          category: "",
          materialCode: "",
          productName: "",
          productModel: "",
          contractRemarks: "",
          unit: "",
          orderQuantity: "",
          orderDate: "",
          deliveryDate: "",
          changeDate: "",
          responsibleEngineer: "",
          productionStatus: "",
          storageTime: "",
          shippingDate: "",
          outsourced: "",
          productionQuantity: "",
          quantityShipped: "",
          remark: ""
        };
      }
    },
    async submitForm() {
      if (this.formData.id) {
        // 编辑提交逻辑，暂时留空
        updateBydSpecialPojectData(this.formData).then(
          (res) => {
            this.$message.success("编辑成功");
            this.dialogVisible = false;
            this.$emit("refresh");
          }
        );
      } else {
        try {
          const response = await createBydspecialPojectData(this.formData).then(
            (res) => {
              this.$message.success("保存成功");
              this.dialogVisible = false;
              this.$emit("refresh");
            }
          );
        } catch (error) {
          this.$message.error("保存失败");
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
/* 可根据需要添加样式 */
::v-deep .el-form-item {
  margin-bottom: 10px !important;
}
</style>
